import ECharts from 'vue-echarts'
import 'echarts/lib/chart/bar'
import uploadMedia from '@/components/upload-media'
import supportFacilityInformation from '../../project-manage/newLook/supporting-facilities-look'
import {generalSituation, queryProjectTop, queryProjectTopId, checkFiles} from '../api/profile'
import {mapGetters} from "vuex";
import {sendMsg} from "../../project-overview/api/overview";
import {getDict} from "@/utils";
import $echarts from '@/utils/echarts'
export default {
    data() {
        return {
            manageUnits: [],
            projectTypes: [],
            initialTypes: [],
            planUses: [],
            ownershipNatureTypes: [],
            propertySources: [],
            projectStreet: [],
            propertyTypes: [],
            propertyUseTypes: [],
            transferModeOption: [],
            communityNames: [],
            communityNameStreet: [],
            landUses: [],
            simplebar: {
                dataset: {
                    source: [
                    ],
                },
                tooltip: {},
                xAxis: {
                },
                yAxis: {type: 'category'},
                color: '#27aac8',
                series: {
                    type: 'bar',
                    encode: {
                        x: 'amount',
                        y: 'product'
                    }
                },
                minInterval: 1,
                splitNumber : 5,
                grid: {
                    top: '1px',
                    left: '12%',
                    right: '1px',
                    bottom : '20%'
                }
            },
            inputSearch: '',
            tabPosition: 'left',
            busId: '',
            modelType: '',
            dialogVisible: false,
            addSource: true,
            formError: {
                resource: '',
                desc: ''
            },
            headData: {
                projectNumber: 0, // 项目总数
                constructionArea: 0, // 建筑面积
                totalAssets: 0, // 资产总套数
                useRate: { // 自用率
                    value: 0, // 自用面积
                    percentage: 0 // 自用占比
                },
                vacancyRate: {  // 空置率
                    value: 0, // 空置面积
                    percentage: 0 // 空置率
                },
                occupancyRate: { // 出租率
                    value: 0, // 面积出租率
                    numberSets: 0 // 套数出租率
                },
                propertyTop4: [ // 物业类型使用情况Top4
                    {
                        type: '行政办公', // 名称
                        quantity: 4500, // 量
                        percentage: 51 // 占比
                    }
                ],
                projectTop4: [ // 项目资产面积Top4
                    [5821, '项目4'], // 资产  项目名
                    [8230, '项目3'],
                    [4103, '项目2'],
                    [1275, '项目1'],
                ]
            },
            centered: [
               /* {
                    projectName: '项目1', // 项目名
                    projectId: '',
                    landArea: 5622, // 用地面积
                    totalAssets: 566,// 资产总数
                    details: {
                        projectId: '123456789', // 项目编号
                        projectName: '项目1', // 项目名称
                        projectDes: '项目简介',// 项目简称
                        parcelCode: 'NSD3232328', // 宗地代码
                        constructionUnit: '中建18局', // 建设单位
                        projectStartTime: '2018-05-29', // 项目开工时间
                        projectCompletionTime: '2018-05-29', // 项目竣工时间
                        managementOffice: '招商物业', // 管理所
                        buildingNumber: '11', // 总栋数
                        landArea: '53523', // 用地面积
                        constructionArea: '43523', // 建筑面积
                        usageArea: '33523', // 使用面积
                        nonOperatingArea: '523', // 非经营面积
                        businessArea: '32523', // 经营面积
                        noApportionmentArea: '323', // 不分摊面积
                        constructionPrice: '33523', // 建构价数
                        propertyOwnership: '政府产权', // 物业权属
                        address: '广东省 深圳市 福田区 泰然6路 118号', // 地址
                        mapCoordinates: 'N35°11′48.41″ E110°43′36.44″', // 地图坐标
                        community: '福田街道办',  // 街道/社区办
                        remarks: '备注信息备注信息备注信息备注信息备注信息备注信息', // 备注信息
                        busId: '123456789987654321',
                        milestone: [
                            {
                                content: '物业移交',
                                text: '这里是物业移交的备注信息，当文本信息超过两行时显示省略号... 这里是物业移交的备注信息，当文本信息超过两行时显示省略号... 这里是物业移交的备注信息，当文本信息超过两行时显示省略号... 这里是物业移交的备注信息，当文本信息超过两行时显示省略号... 这里是物业移交的备注信息，当文本信息超过两行时显示省略号...',
                                upload: '文档2.docs（10.9M）',
                                fileName: '文档2.docs',
                                url: '#',
                                busId: '#',
                                timestamp: '2018-04-15'
                            }, {
                                content: '竣工验收',
                                upload: '文档2.docs（10.9M）',
                                fileName: '文档2.docs',
                                url: '#',
                                busId: '#',
                                timestamp: '2018-04-13'
                            }, {
                                content: '项目在建',
                                text: '项目在建备注信息.',
                                upload: '文档2.docs（10.9M）',
                                fileName: '文档2.docs',
                                url: '#',
                                busId: '#',
                                timestamp: '2018-04-11'
                            }, {
                                content: '项目规划',
                                text: '项目规划备注信息.',
                                upload: '文档2.docs（10.9M）',
                                fileName: '文档2.docs',
                                url: '#',
                                busId: '#',
                                timestamp: '2018-04-11'
                            }
                        ]
                    }
                },
                {
                    projectName: '项目2',
                    landArea: 5622,
                    totalAssets: 566,
                    details: {
                        projectId: '123456789',
                        projectName: '项目2',
                        projectDes: '项目2简介',
                        parcelCode: 'NSD3232328',
                        constructionUnit: '中建18局',
                        projectStartTime: '2018-05-29',
                        projectCompletionTime: '2018-05-29',
                        managementOffice: '招商物业',
                        buildingNumber: '11',
                        landArea: '53523',
                        constructionArea: '43523',
                        usageArea: '33523',
                        nonOperatingArea: '523',
                        businessArea: '32523',
                        noApportionmentArea: '323',
                        constructionPrice: '33523',
                        propertyOwnership: '政府产权',
                        address: '广东省 深圳市 福田区 泰然6路 118号',
                        mapCoordinates: 'N35°11′48.41″ E110°43′36.44″',
                        community: '福田街道办',
                        remarks: '备注信息备注信息备注信息备注信息备注信息备注信息',
                        busId: '123456789987654321',
                        milestone: [
                            {
                                content: '物业移交',
                                text: '这里是物业移交的备注信息，当文本信息超过两行时显示省略号... 这里是物业移交的备注信息，当文本信息超过两行时显示省略号... 这里是物业移交的备注信息，当文本信息超过两行时显示省略号... 这里是物业移交的备注信息，当文本信息超过两行时显示省略号... 这里是物业移交的备注信息，当文本信息超过两行时显示省略号...',
                                upload: '文档2.docs（10.9M）',
                                fileName: '文档2.docs',
                                url: '#',
                                timestamp: '2018-04-15'
                            }, {
                                content: '竣工验收',
                                upload: '文档2.docs（10.9M）',
                                fileName: '文档2.docs',
                                url: '#',
                                timestamp: '2018-04-13'
                            }, {
                                content: '项目在建',
                                text: '项目在建备注信息.',
                                upload: '文档2.docs（10.9M）',
                                fileName: '文档2.docs',
                                url: '#',
                                timestamp: '2018-04-11'
                            }, {
                                content: '项目规划',
                                text: '项目规划备注信息.',
                                upload: '文档2.docs（10.9M）',
                                fileName: '文档2.docs',
                                url: '#',
                                timestamp: '2018-04-11'
                            }
                        ]
                    }
                },
                {
                    projectName: '项目3',
                    landArea: 5622,
                    totalAssets: 566,
                    details: {
                        projectId: '123456789',
                        projectName: '项目3',
                        projectDes: '项目3简介',
                        parcelCode: 'NSD3232328',
                        constructionUnit: '中建18局',
                        projectStartTime: '2018-05-29',
                        projectCompletionTime: '2018-05-29',
                        managementOffice: '招商物业',
                        buildingNumber: '11',
                        landArea: '53523',
                        constructionArea: '43523',
                        usageArea: '33523',
                        nonOperatingArea: '523',
                        businessArea: '32523',
                        noApportionmentArea: '323',
                        constructionPrice: '33523',
                        propertyOwnership: '政府产权',
                        address: '广东省 深圳市 福田区 泰然6路 118号',
                        mapCoordinates: 'N35°11′48.41″ E110°43′36.44″',
                        community: '福田街道办',
                        remarks: '备注信息备注信息备注信息备注信息备注信息备注信息',
                        busId: '123456789987654321',
                        milestone: [
                            {
                                content: '物业移交',
                                text: '这里是物业移交的备注信息，当文本信息超过两行时显示省略号... 这里是物业移交的备注信息，当文本信息超过两行时显示省略号... 这里是物业移交的备注信息，当文本信息超过两行时显示省略号... 这里是物业移交的备注信息，当文本信息超过两行时显示省略号... 这里是物业移交的备注信息，当文本信息超过两行时显示省略号...',
                                upload: '文档2.docs（10.9M）',
                                fileName: '文档2.docs',
                                url: '#',
                                timestamp: '2018-04-15'
                            }, {
                                content: '竣工验收',
                                upload: '文档2.docs（10.9M）',
                                fileName: '文档2.docs',
                                url: '#',
                                timestamp: '2018-04-13'
                            }, {
                                content: '项目在建',
                                text: '项目在建备注信息.',
                                upload: '文档2.docs（10.9M）',
                                fileName: '文档2.docs',
                                url: '#',
                                timestamp: '2018-04-11'
                            }, {
                                content: '项目规划',
                                text: '项目规划备注信息.',
                                upload: '文档2.docs（10.9M）',
                                fileName: '文档2.docs',
                                url: '#',
                                timestamp: '2018-04-11'
                            }
                        ]
                    }
                }*/
            ],
            projectInfo: {},
            landInfo: {},
            supportingFacilities: [],
            projectMilestones: [
               /* {
                    milestoneName: '物业移交',
                    milestoneDesc: '这里是物业移交的备注信息，当文本信息超过两行时显示省略号... 这里是物业移交的备注信息，当文本信息超过两行时显示省略号... 这里是物业移交的备注信息，当文本信息超过两行时显示省略号... 这里是物业移交的备注信息，当文本信息超过两行时显示省略号... 这里是物业移交的备注信息，当文本信息超过两行时显示省略号...',
                    upload: '文档2.docs（10.9M）',
                    fileName: '文档2.docs',
                    url: '#',
                    createTime: '2018-04-15',
                    color: '#000000'
                }, {
                    milestoneName: '竣工验收',
                    upload: '文档2.docs（10.9M）',
                    fileName: '文档2.docs',
                    url: '#',
                    createTime: '2018-04-13',
                    color: '#000000'
                }, {
                    milestoneName: '项目在建',
                    milestoneDesc: '项目在建备注信息.',
                    upload: '文档2.docs（10.9M）',
                    fileName: '文档2.docs',
                    url: '#',
                    createTime: '2018-04-11',
                    color: '#1563d1'
                }, {
                    milestoneName: '项目规划',
                    milestoneDesc: '项目规划备注信息.',
                    upload: '文档2.docs（10.9M）',
                    fileName: '文档2.docs',
                    url: '#',
                    createTime: '2018-04-11',
                    color: '#868e96'
                }*/
            ],
            property_overview: false,
            // hxf-0908-物业信息纠错校验
            errorCorrectionRules: {
                resource: [
                    { required: true, message: '请选择纠错类型', trigger: 'blur' }
                ],
                desc: [
                    { required: true, message: '请输入错误描述', trigger: 'blur' },
                    { min: 0, max: 30, message: '长度在 0 到 30 个字符', trigger: 'blur' }
                ]
            }
        }
    },
    mounted () {
        // 基于准备好的dom，初始化echarts实例
        let myChart = $echarts.init(document.getElementById('myChart'))
        generalSituation().then(res => {
            if (res.data.code === 0) {
                this.headData = res.data.data
                let projectTop4 = []
                res.data.data.projectTop4.map(item => {
                    let arr = []
                    arr.push(item.value)
                    arr.push(item.label)
                    /*if (item.label.length > 2) {
                        arr.push(item.label.trim().slice(0,2) + '...')
                    } else {
                        arr.push(item.label)
                    }*/
                    projectTop4.push(arr)
                })
                // console.log('res.data.data----', projectTop4)
                // 需要渲染前放入配置项中
                this.$set(this.simplebar.dataset, 'source', projectTop4)
                // 绘制图表
                myChart.setOption(this.simplebar)
                window.addEventListener("resize", () => { myChart.resize();});
            }
        })
        this.handleQueryProjectTop('')
        this.property_overview = this.permissions['property_overview']
        this.manageUnits = getDict('administrative_office')
        this.projectType = getDict('project_types')
        this.planUses = getDict('plan_uses')
        this.ownershipNatureTypes = getDict('asset-ownership-nature')
        this.propertySources = getDict('property_source')
        this.propertyTypes = getDict("property_types")
        this.propertyUseTypes = getDict("property_use_types")
        this.transferModeOption = getDict("transfer_types")
        this.projectStreet = getDict('streets')
        this.communityNames = getDict('community_names')
        this.landUses = getDict('land_uses')
        this.initialTypes = getDict('project_init_type')
    },
    filters: {
        ellipsis(value) {
            if (!value) {
                return ''
            } else if (value.length > 6) {
                return value.slice(0,6) + '...'
            } else {
                return value
            }
        }
    },
    methods: {
        showDialog() {
            this.dialogVisible = true
        },
        beforeClose(done) {
            this.cancel()
            done()
        },
        cancel() {
            this.dialogVisible = false
        },
        commit() {
            this.$refs['formError'].validate((valid) => {
                if (valid) {
                    //拼装数据
                    let content = "【项目信息概况】" + this.formError.resource + ": "+ this.formError.desc
                    let msg = {
                        "userIdList": [],
                        "sysInfo": {
                            "msgContent": content
                        },
                        "deptList": [39]
                    }
                    sendMsg(msg).then(rep => {
                        this.$message.success('提交成功！')
                        this.cancel()
                    })
                } else {
                    this.$message.error('请完善未填写信息！')
                    return false;
                }
            })
        },
        handleToLink() {
            // hxf-查看物业跳转到物业管理
            this.$router.push('property-manage')
        },
        handleToProjectLink() {
            // hxf-查看物业跳转到项目管理
            this.$router.push('project-manage')
        },
        // 左侧查看按钮
        viewClick (item) {
            // hxf-跳转到项目信息概况
            this.$router.push({name:'project_overview',query:{'id': item.projectId}})
            // console.log('左侧查看按钮viewClick', item)
        },
        // 总栋数点击事件
        buildingNumberClick (item) {
            this.$router.push('building-manage')
            // console.log('总栋数点击事件buildingNumberClick', item)
        },
        // 下载点击事件
        downloadClick (fileId) {
            checkFiles(fileId).then(resp => {
                if (resp.data.code === 0) {
                    window.open('/admin/sys-file/download/' + fileId)
                } else {
                    this.$message({
                        message: `文件不存在！`,
                        type: 'warning'
                    })
                }
            })
        },
        handleTabClick(tab) {
            let projectId = this.centered[tab.index].projectId
            queryProjectTopId(projectId).then(res => {
                if (res.data.code === 0) {
                    this.projectInfo = {...res.data.data.landInfo,...res.data.data.propertyBasic}
                    /*if (res.data.data.landInfo !== null) {
                        this.landInfo = res.data.data.landInfo
                    }*/
                    this.initCommunityName()
                    this.$set(this.projectInfo,'manageUnit',res.data.data.manageUnit)
                    this.$set(this.projectInfo,'mapCoordinates',res.data.data.mapCoordinates)
                    // hxf-0827-里程碑信息，有数据接入时放开
                    this.supportingFacilities = res.data.data.supportingFacilities
                    let projectMilestones = res.data.data.projectMilestones.filter(item => {
                        item.materialsFormVoList = item.materialsFormVoList ?
                            item.materialsFormVoList.filter(it => it.original)
                            : []
                        return item.materialsFormVoList
                    })
                    this.projectMilestones = projectMilestones
                    if (this.projectMilestones.length > 0) {
                        this.projectMilestones[this.projectMilestones.length - 1].color = '#1563d1'
                    }
                    if (this.projectInfo.areaCode) {
                        this.projectInfo.cityCode = this.projectInfo.areaCode.split('-')[0]
                        this.projectInfo.countyCode = this.projectInfo.areaCode.split('-')[1]
                    }
                }
            })
        },
        handleQueryProjectTop(projectName) {
            queryProjectTop(projectName).then(res => {
                if (res.data.code === 0) {
                    this.centered = res.data.data
                    this.projectInfo = {...this.centered[0].details.landInfo, ...this.centered[0].details.propertyBasic}
                    this.initCommunityName()
                    if (this.projectInfo.addSource === '1') {
                        this.addSource = false
                    }
                    this.$set(this.projectInfo,'manageUnit',this.centered[0].details.manageUnit)
                    this.$set(this.projectInfo,'mapCoordinates',this.centered[0].details.mapCoordinates)
                    this.supportingFacilities = res.data.data.supportingFacilities
                    let projectMilestones = this.centered[0].details.projectMilestones.filter(item => {
                        item.materialsFormVoList = item.materialsFormVoList ?
                            item.materialsFormVoList.filter(it => it.original)
                            : []
                        return item.materialsFormVoList
                    })
                    this.projectMilestones = projectMilestones
                    // hxf-0827-里程碑信息，有数据接入时放开
                    // this.projectMilestones = this.centered[0].details.projectMilestones
                    if (this.projectMilestones.length > 0) {
                        this.projectMilestones[this.projectMilestones.length - 1].color = '#1563d1'
                    }
                    if (this.projectInfo.areaCode) {
                        this.projectInfo.cityCode = this.projectInfo.areaCode.split('-')[0]
                        this.projectInfo.countyCode = this.projectInfo.areaCode.split('-')[1]
                    }
                }
            })
        },
        handleInputSearch() {
            this.handleQueryProjectTop(this.inputSearch)
        },
        // hxf-1012-回显时对应value显示label
        getCardTypeValue(num, sum){
            let arr = sum.filter(e=>e.value === num)
            if (arr.length > 0) {
                return arr[0].label
            } else {
                return num
            }
        },
        //社区联动
        initCommunityName(){
            this.communityNameStreet.length = 0;
            let selectStreet = this.projectInfo.street
            if(selectStreet != '' &&  this.communityNames != null &&  this.communityNames.length > 0){
                this.communityNameStreet = this.communityNames.filter(cn => cn.value.indexOf(selectStreet) != -1)
            }
        },
        //配套信息查看
        handleClickLook(item) {
            this.$refs.supportFacilityInformation.showDialog(item)
        },
    },
    components: {
        'v-chart': ECharts,
        uploadMedia,
        supportFacilityInformation
    },
    computed: {
        ...mapGetters({
            permissions: 'permissions',
            cityAssembly: 'getCityAssembly',
            districtCollection: 'getDistrictCollection'
        })
    },
}
